import "./index.less";
import { Form } from "ant-design-vue";

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 4},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 18},
  },
};

export default{
  name: "common-form",
  props: {
    formJson: {
      type: Array,
      default: ()=> []
    },
    onChange: {
      type: Function,
      default: ()=> ()=> {}
    },
    colon: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: ()=> {}
    }
  },

  data() {
    return {
      form: {},
    };
  },
  created(){
    this.form = this.$form.createForm(this);
  },

  methods: {
    // 每种类型的表单item
    renderFormItem(item, index) {
      const {
        colon,
        form,
        formData
      } = this;
      const { type, label, fieldName, initialValue = "", value, rules = [], options = [], extraConfig } = item;
      let { placeholder } = item;
      if(extraConfig && extraConfig.disabled){
        placeholder = " ";
      }
      console.log(item);
      switch (type) {

        // 自定义内容，当现有组件不满足需求时，可在外层组件中自定义表单项（或分组小标题等其他内容），写在配置项的content里即可
        case "custom":
            return <div key={`form-item-${index}`} {...extraConfig}>{item.content}</div>;
        // 普通文本
        case "input":
            return (
              <a-form-model-item prop={fieldName} colon={colon} label={label} key={`form-item-${index}`} class={extraConfig ? (extraConfig.className || "") : ""}>
                <a-input value={formData[fieldName]} autoComplete="off" placeholder={placeholder || `请输入${label}`} {...extraConfig}
                  disabled={extraConfig.disabled}
                  onChange={(e) => this.onFormChange(fieldName, e.target.value)}
                   />
              </a-form-model-item>
            );

        // 数字输入框
        case "number":
          return (
            <a-form-model-item prop={fieldName} colon={colon} label={label} key={`form-item-${index}`} class={extraConfig ? (extraConfig.className || "") : ""}>
              <a-input-number value={formData[fieldName]} autoComplete="off" placeholder={placeholder || `请输入${label}`} {...extraConfig}
                  disabled={extraConfig.disabled}
                  onChange={(e) => this.onFormChange(fieldName, e)}
                   />

            </a-form-model-item>
          );


        // 下拉选择框，extraConfig中配置{mode: 'tags'}可进行多选
        case "select":
          return (

            <a-form-model-item prop={fieldName} colon={colon} label={label} key={`form-item-${index}`} class={extraConfig ? (extraConfig.className || "") : ""}>
              {
                <a-select value={formData[fieldName]} onChange={(e) => this.onFormChange(fieldName, e)}  autoComplete="off" disabled={extraConfig.disabled}  {...extraConfig}>
                {
                  options.map(item2 => (
                      <a-select-option key={item2.value}>
                       {item2.label}
                      </a-select-option>
                    ))
                }

              </a-select>
              }

            </a-form-model-item>
          );
        default:
            return null;
      }
    },
    // 表单变化处理
    onFormChange(fieldName, value, ...args) {
      const { onChange = () => {} } = this;
      onChange(fieldName, value, ...args);
      // console.log({fieldName, value, ...args});
    },

  },

  render() {
    const { formJson = [],formData, layout= "inline" } = this;
    console.log(formData);
    return (
      <a-form-model props={{
        model: formData
      }} {...formItemLayout} ref="form" labelAlign="right" layout={layout} class="common-form-container">
        {
          formJson.map((item, index) => item.notRender ? null :this.renderFormItem(item, index))
        }
      </a-form-model>
    );
  }
};
